<template>
  <div id="carts">
    <!-- 商品详情 -->
    <ul class="goods">
      <li
        style="margin-bottom:4vw;background:#fff"
        v-for="(item,index) in cartListData"
        :key="index"
      >
        <div style="padding-bottom:4.26vw">
          <img
            type="checkbox"
            class="mg1"
            :src="'https://res.bestcake.com/m-images/order/mw_firm_duihao_'+(item.bool?1:2)+'.jpg'"
            style="margin-left: 4vw; margin-right: 3vw;margin-top: 17vw;"
            @click="setCheck(item.bool,index)"
          />
          <a>
            <img class="mg2" :src="'https://res.bestcake.com\/m-images\/cart\/'+item.Name+'.png'" />
          </a>
          <div>
            <h1>{{item.Name}}</h1>
            <div>
              <span>{{Math.ceil(item.Size.substring(0,item.Size.length-1)*453.59)}}克({{item.Size}})</span>
              <div>
                <img
                  v-on:click="del(item)"
                  src="https://res.bestcake.com\m-images\order\reduce-1.png"
                />
                {{item.num}}
                <img
                  v-on:click="add(item)"
                  src="https://res.bestcake.com\m-images\order\add.png"
                />
              </div>
            </div>
            <span>{{item.currentPrice*item.num}}.00</span>
          </div>
        </div>
        <div class="youhui">
          <span>优惠方式</span>
          <span>不参与活动</span>
        </div>
      </li>
    </ul>
    <!-- 底部计算 -->
    <div class="sum">
      <img
        v-on:click="setAllBool"
        v-bind:src="'https://res.bestcake.com/m-images/order/mw_firm_duihao_'+(isAllsel?1:2)+'.jpg'"
      />
      <h1>全选</h1>
      <a>清空</a>
      <div>
        <dfn>
          合计:&nbsp
          <span>{{allPrice}}</span>
        </dfn>
        <div>已优惠:</div>
      </div>
      <button>结算</button>
    </div>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";
import { mapState } from "vuex";
export default {
  data() {
    return {
      cartListData: [],
      allPrice: 0,
      isAllsel: false,
      isArr: []
    };
  },
  created() {
    this.$store.commit("VuexInit");
    this.cartListData = this.$store.state.cartList;
    console.log(this.$store.state.cartList);
  },
  computed: {
    ...mapState(["cartList"])
  },

  mounted() {
    this.count();
  },
  methods: {
    setCheck(bool, index) {
      if (bool == true) {
        this.cartListData[index].bool = false;
      } else {
        this.cartListData[index].bool = true;
      }
      this.count();
    },
    add(item) {
     
      item.mark = "";
      this.$store.commit("add", item);
      this. count()
      //  console.log(item)
    },
    del(item) {
      if(item.num>1){
        this.$store.commit("del", item);
        this.count();
      }else{
           MessageBox.confirm('&nbsp&nbsp','确定要删除此款商品吗?').then(action => {
                            if (action == 'confirm') {//点击确定的回调
                                  this.$store.commit("del", item);
                                  this.count();
                            }
                        }).catch(err => {
                            if (err == 'cancel') {//点击暂不的回调
                            // console.log('再看看');
                            }
                        });
      }
      console.log(item)
      
      
      
    },
    count() {
      //根据布尔值 计算  总价
      //根据length 计算  是否全选
      this.allPrice = 0;
      this.isArr = [];
      this.cartListData.map(item => {
        if (item.bool) {
          this.allPrice += item.num * item.currentPrice;
          // console.log(item)
          this.isArr.push(item);
        }
      });
      if (this.isArr.length == this.cartListData.length) {
        this.isAllsel = true;
      } else {
        this.isAllsel = false;
      }
    },
    setAllBool() {
      if (this.isAllsel) {
        var allBool = false;
        this.cartListData.map(item => {
          item.bool = allBool;
          this.isAllsel = allBool;
          if (!item.bool) {
            this.allPrice=0
          }
        });
      } else {
        var allBool = true;
        this.isAllsel = allBool;
        this.cartListData.map(item => {
          item.bool = allBool;
          if (item.bool) {
            this.allPrice += item.num * item.currentPrice;
          }
        });
      }
    }
  },
  watch: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#carts {
  width: 100%;
  padding-bottom: r(90);
  background: #f7f7f7;
  //商品详情
  .goods {
    width: 100%;
    > li .youhui {
      border-top: 0.133vw solid #ddd;
      width: r(328.762);
      height: r(48.42);
      margin-left: r(46.237);
      text-align: left;
      span:first-of-type {
        margin: r(14.475) r(4.99) r(14.475) 0;
        display: inline-block;
        color: #f2495e;
        font: normal bold r(14) / r(19) "";
      }
      span:last-of-type {
        margin: r(14.475) 0;
        font: normal 500 r(14) / r(19) "";
      }
    }
    > li div:first-of-type {
      display: flex;
      .mg1 {
        width: r(19.98);
        height: r(19.98);
      }
      .mg2 {
        width: r(114);
        margin-right: r(15);
        padding-top: r(15.975);
      }
      div:first-of-type {
        padding-top: r(18.975);
        display: block;
        h1 {
          font: normal 500 r(16) / r(18) "";
          text-align: left;
        }
        span {
          display: inline-block;
          width: 100%;
          margin-top: r(9.975);
          text-align: left;
          font: normal 600 r(13) / r(15) "";
        }
        div:first-of-type {
          padding-top: 0;
          line-height: r(16);
          margin: r(4.5) 0;
          display: flex;
          span {
            font-size: 2.93vw;
            color: #ccc;
            line-height: 3.46vw;
            margin-top: 1.69vw;
            text-align: left;
            width: r(97.5);
          }
          > div {
            width: r(97.5);
            display: flex;
            justify-content: space-around;
            height: r(25);

            img {
              margin-top: r(3);
              width: r(10);
              height: r(10.5);
            }
          }
        }
      }
    }
  }
  //底部结算
  .sum {
    position: relative;
    button {
      font: normal 600 r(16) / r(16) "";
      border: none;
      display: block;
      position: absolute;
      right: 0;
      width: r(114.97);
      height: 100%;
      color: #fff;
      background: #02d4d7;
    }
    > div:first-of-type {
      dfn {
        font: normal 500 r(14) / r(24) "";
        span {
          color: #f2495e;
          font-weight: 600;
        }
      }
      width: r(137.5);
      text-align: right;
      margin: r(9.488) r(6.525) 0 0;
    }
    width: r(375);
    height: r(56);
    position: fixed;
    background: #fff;
    left: 0;
    bottom: r(55.2);
    display: flex;
    h1 {
      font-size: r(14);
      font-weight: 500;
      line-height: r(56);
      margin-right: r(15);
    }
    a {
      font: normal 500 r(13.5) / r(56) "";
    }
    img {
      width: r(19.98);
      height: r(19.98);
      margin: r(16.275) r(4.987) 0 r(11.25);
    }
  }
}
</style>
